<template>
  <div class="traffic-report">
    <div class="page-header">
      <h2>流量报表</h2>
      <p>查看网站流量数据和用户行为分析</p>
    </div>
    
    <div class="report-content">
      <!-- 流量概览 -->
      <div class="traffic-overview">
        <div class="overview-card">
          <div class="card-icon">👥</div>
          <div class="card-content">
            <h3>总访问量</h3>
            <p class="metric-value">{{ formatNumber(totalVisits) }}</p>
            <span class="metric-change positive">+{{ visitGrowth }}%</span>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon">🔄</div>
          <div class="card-content">
            <h3>独立访客</h3>
            <p class="metric-value">{{ formatNumber(uniqueVisitors) }}</p>
            <span class="metric-change positive">+{{ visitorGrowth }}%</span>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon">📄</div>
          <div class="card-content">
            <h3>页面浏览量</h3>
            <p class="metric-value">{{ formatNumber(pageViews) }}</p>
            <span class="metric-change negative">{{ pageViewGrowth }}%</span>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon">⏱️</div>
          <div class="card-content">
            <h3>平均停留时间</h3>
            <p class="metric-value">{{ avgSessionDuration }}</p>
            <span class="metric-change positive">+{{ durationGrowth }}%</span>
          </div>
        </div>
      </div>
      
      <!-- 流量趋势图 -->
      <div class="traffic-chart-section">
        <div class="section-header">
          <h3>流量趋势</h3>
          <div class="time-filter">
            <button class="filter-btn" :class="{ active: selectedPeriod === '7d' }" @click="selectedPeriod = '7d'">7天</button>
            <button class="filter-btn" :class="{ active: selectedPeriod === '30d' }" @click="selectedPeriod = '30d'">30天</button>
            <button class="filter-btn" :class="{ active: selectedPeriod === '90d' }" @click="selectedPeriod = '90d'">90天</button>
          </div>
        </div>
        
        <div class="chart-container">
          <div class="chart-placeholder">
            <div class="chart-icon">📊</div>
            <p>流量趋势图表</p>
            <small>显示过去{{ selectedPeriod === '7d' ? '7天' : selectedPeriod === '30d' ? '30天' : '90天' }}的流量变化</small>
          </div>
        </div>
      </div>
      
      <!-- 流量来源分析 -->
      <div class="traffic-sources">
        <div class="section-header">
          <h3>流量来源</h3>
        </div>
        
        <div class="sources-grid">
          <div class="source-card" v-for="source in trafficSources" :key="source.name">
            <div class="source-header">
              <div class="source-icon" :style="{ background: source.color }">{{ source.icon }}</div>
              <div class="source-info">
                <h4>{{ source.name }}</h4>
                <p class="source-type">{{ source.type }}</p>
              </div>
              <div class="source-percentage">{{ source.percentage }}%</div>
            </div>
            
            <div class="source-metrics">
              <div class="metric">
                <span class="metric-label">访问量</span>
                <span class="metric-value">{{ formatNumber(source.visits) }}</span>
              </div>
              <div class="metric">
                <span class="metric-label">跳出率</span>
                <span class="metric-value">{{ source.bounceRate }}%</span>
              </div>
              <div class="metric">
                <span class="metric-label">转化率</span>
                <span class="metric-value">{{ source.conversionRate }}%</span>
              </div>
            </div>
            
            <div class="source-progress">
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: source.percentage + '%', background: source.color }"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 热门页面 -->
      <div class="popular-pages">
        <div class="section-header">
          <h3>热门页面</h3>
        </div>
        
        <div class="pages-table">
          <table>
            <thead>
              <tr>
                <th>页面路径</th>
                <th>页面标题</th>
                <th>浏览量</th>
                <th>独立访客</th>
                <th>平均停留时间</th>
                <th>跳出率</th>
                <th>转化率</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="page in popularPages" :key="page.path">
                <td class="page-path">{{ page.path }}</td>
                <td class="page-title">{{ page.title }}</td>
                <td class="metric-number">{{ formatNumber(page.views) }}</td>
                <td class="metric-number">{{ formatNumber(page.uniqueViews) }}</td>
                <td class="metric-time">{{ page.avgTime }}</td>
                <td class="metric-rate" :class="{ high: page.bounceRate > 70, medium: page.bounceRate > 40 }">
                  {{ page.bounceRate }}%
                </td>
                <td class="metric-rate" :class="{ high: page.conversionRate > 5, medium: page.conversionRate > 2 }">
                  {{ page.conversionRate }}%
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <!-- 设备和浏览器分析 -->
      <div class="device-browser-analysis">
        <div class="analysis-grid">
          <!-- 设备类型 -->
          <div class="analysis-card">
            <h3>设备类型</h3>
            <div class="device-stats">
              <div class="device-item" v-for="device in deviceStats" :key="device.type">
                <div class="device-info">
                  <span class="device-icon">{{ device.icon }}</span>
                  <span class="device-name">{{ device.type }}</span>
                </div>
                <div class="device-metrics">
                  <span class="device-percentage">{{ device.percentage }}%</span>
                  <div class="device-bar">
                    <div class="device-fill" :style="{ width: device.percentage + '%' }"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 浏览器分析 -->
          <div class="analysis-card">
            <h3>浏览器分布</h3>
            <div class="browser-stats">
              <div class="browser-item" v-for="browser in browserStats" :key="browser.name">
                <div class="browser-info">
                  <span class="browser-icon">{{ browser.icon }}</span>
                  <span class="browser-name">{{ browser.name }}</span>
                </div>
                <div class="browser-metrics">
                  <span class="browser-percentage">{{ browser.percentage }}%</span>
                  <div class="browser-bar">
                    <div class="browser-fill" :style="{ width: browser.percentage + '%' }"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 地理位置分析 -->
      <div class="geo-analysis">
        <div class="section-header">
          <h3>地理位置分析</h3>
        </div>
        
        <div class="geo-grid">
          <div class="geo-card" v-for="location in geoStats" :key="location.region">
            <div class="geo-header">
              <span class="geo-flag">{{ location.flag }}</span>
              <div class="geo-info">
                <h4>{{ location.region }}</h4>
                <p class="geo-country">{{ location.country }}</p>
              </div>
              <span class="geo-percentage">{{ location.percentage }}%</span>
            </div>
            
            <div class="geo-metrics">
              <div class="geo-metric">
                <span class="label">访问量:</span>
                <span class="value">{{ formatNumber(location.visits) }}</span>
              </div>
              <div class="geo-metric">
                <span class="label">转化率:</span>
                <span class="value">{{ location.conversionRate }}%</span>
              </div>
            </div>
            
            <div class="geo-progress">
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: location.percentage + '%' }"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TrafficReport',
  data() {
    return {
      selectedPeriod: '30d',
      
      // 流量概览数据
      totalVisits: 125680,
      visitGrowth: 12.5,
      uniqueVisitors: 89420,
      visitorGrowth: 8.3,
      pageViews: 342150,
      pageViewGrowth: -2.1,
      avgSessionDuration: '3:42',
      durationGrowth: 15.7,
      
      // 流量来源数据
      trafficSources: [
        {
          name: '搜索引擎',
          type: '自然流量',
          icon: '🔍',
          color: '#4285f4',
          visits: 45230,
          percentage: 36,
          bounceRate: 42,
          conversionRate: 3.2
        },
        {
          name: '直接访问',
          type: '直接流量',
          icon: '🌐',
          color: '#34a853',
          visits: 38150,
          percentage: 30,
          bounceRate: 35,
          conversionRate: 4.1
        },
        {
          name: '社交媒体',
          type: '社交流量',
          icon: '📱',
          color: '#ea4335',
          visits: 25420,
          percentage: 20,
          bounceRate: 58,
          conversionRate: 2.8
        },
        {
          name: '推荐链接',
          type: '推荐流量',
          icon: '🔗',
          color: '#fbbc04',
          visits: 12680,
          percentage: 10,
          bounceRate: 48,
          conversionRate: 3.5
        },
        {
          name: '邮件营销',
          type: '邮件流量',
          icon: '📧',
          color: '#9c27b0',
          visits: 5200,
          percentage: 4,
          bounceRate: 32,
          conversionRate: 5.2
        }
      ],
      
      // 热门页面数据
      popularPages: [
        {
          path: '/',
          title: '首页',
          views: 45230,
          uniqueViews: 32150,
          avgTime: '2:35',
          bounceRate: 35,
          conversionRate: 4.2
        },
        {
          path: '/products',
          title: '产品列表',
          views: 28640,
          uniqueViews: 21480,
          avgTime: '4:12',
          bounceRate: 42,
          conversionRate: 6.8
        },
        {
          path: '/product/detail',
          title: '产品详情',
          views: 19850,
          uniqueViews: 15620,
          avgTime: '3:28',
          bounceRate: 38,
          conversionRate: 8.5
        },
        {
          path: '/cart',
          title: '购物车',
          views: 12340,
          uniqueViews: 9850,
          avgTime: '2:15',
          bounceRate: 25,
          conversionRate: 12.3
        },
        {
          path: '/checkout',
          title: '结算页面',
          views: 8920,
          uniqueViews: 7650,
          avgTime: '5:42',
          bounceRate: 18,
          conversionRate: 15.7
        }
      ],
      
      // 设备统计数据
      deviceStats: [
        { type: '桌面端', icon: '💻', percentage: 52 },
        { type: '移动端', icon: '📱', percentage: 41 },
        { type: '平板端', icon: '📱', percentage: 7 }
      ],
      
      // 浏览器统计数据
      browserStats: [
        { name: 'Chrome', icon: '🌐', percentage: 68 },
        { name: 'Safari', icon: '🧭', percentage: 18 },
        { name: 'Firefox', icon: '🦊', percentage: 8 },
        { name: 'Edge', icon: '🔷', percentage: 4 },
        { name: '其他', icon: '🌍', percentage: 2 }
      ],
      
      // 地理位置数据
      geoStats: [
        {
          region: '北京',
          country: '中国',
          flag: '🇨🇳',
          visits: 28450,
          percentage: 22.6,
          conversionRate: 4.2
        },
        {
          region: '上海',
          country: '中国',
          flag: '🇨🇳',
          visits: 21380,
          percentage: 17.0,
          conversionRate: 3.8
        },
        {
          region: '广州',
          country: '中国',
          flag: '🇨🇳',
          visits: 18920,
          percentage: 15.1,
          conversionRate: 3.5
        },
        {
          region: '深圳',
          country: '中国',
          flag: '🇨🇳',
          visits: 15640,
          percentage: 12.4,
          conversionRate: 4.1
        },
        {
          region: '杭州',
          country: '中国',
          flag: '🇨🇳',
          visits: 12850,
          percentage: 10.2,
          conversionRate: 3.9
        },
        {
          region: '其他',
          country: '全球',
          flag: '🌍',
          visits: 28440,
          percentage: 22.7,
          conversionRate: 3.2
        }
      ]
    };
  },
  methods: {
    formatNumber(num) {
      if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M';
      } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'K';
      }
      return num.toString();
    }
  }
};
</script>

<style scoped>
.traffic-report {
  padding: 20px;
  background-color: #f8fafc;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h2 {
  color: #1a202c;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.page-header p {
  color: #718096;
  font-size: 16px;
  margin: 0;
}

.report-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 流量概览样式 */
.traffic-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
}

.card-icon {
  font-size: 32px;
  margin-bottom: 16px;
}

.card-content h3 {
  color: #4a5568;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-value {
  color: #1a202c;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.metric-change {
  font-size: 14px;
  font-weight: 600;
}

.metric-change.positive {
  color: #38a169;
}

.metric-change.negative {
  color: #e53e3e;
}

/* 图表区域样式 */
.traffic-chart-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h3 {
  color: #1a202c;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.time-filter {
  display: flex;
  gap: 8px;
}

.filter-btn {
  padding: 8px 16px;
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover {
  border-color: #3182ce;
}

.filter-btn.active {
  background: #3182ce;
  color: white;
  border-color: #3182ce;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7fafc;
  border-radius: 8px;
  border: 2px dashed #cbd5e0;
}

.chart-placeholder {
  text-align: center;
  color: #718096;
}

.chart-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

/* 流量来源样式 */
.traffic-sources {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.source-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  background: #f7fafc;
}

.source-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.source-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-right: 12px;
}

.source-info {
  flex: 1;
}

.source-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
}

.source-type {
  margin: 0;
  font-size: 12px;
  color: #718096;
}

.source-percentage {
  font-size: 18px;
  font-weight: 700;
  color: #1a202c;
}

.source-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.metric {
  text-align: center;
}

.metric-label {
  display: block;
  font-size: 12px;
  color: #718096;
  margin-bottom: 4px;
}

.metric-value {
  font-size: 14px;
  font-weight: 600;
  color: #1a202c;
}

.source-progress {
  margin-top: 16px;
}

.progress-bar {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  
}

.progress-fill {
  height: 100%;
  transition: width 0.3s ease;
}

/* 热门页面表格样式 */
.popular-pages {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pages-table {
  overflow-x: auto;
}

.pages-table table {
  width: 100%;
  border-collapse: collapse;
}

.pages-table th,
.pages-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.pages-table th {
  background: #f7fafc;
  font-weight: 600;
  color: #4a5568;
  font-size: 14px;
}

.page-path {
  font-family: monospace;
  color: #3182ce;
  font-size: 14px;
}

.page-title {
  font-weight: 500;
  color: #1a202c;
}

.metric-number {
  font-weight: 600;
  color: #1a202c;
}

.metric-time {
  font-family: monospace;
  color: #4a5568;
}

.metric-rate {
  font-weight: 600;
}

.metric-rate.high {
  color: #38a169;
}

.metric-rate.medium {
  color: #d69e2e;
}

/* 设备和浏览器分析样式 */
.device-browser-analysis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.analysis-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.analysis-card h3 {
  color: #1a202c;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 20px 0;
}

.device-stats,
.browser-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.device-item,
.browser-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.device-info,
.browser-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.device-icon,
.browser-icon {
  font-size: 20px;
}

.device-name,
.browser-name {
  font-weight: 500;
  color: #1a202c;
}

.device-metrics,
.browser-metrics {
  display: flex;
  align-items: center;
  gap: 12px;
}

.device-percentage,
.browser-percentage {
  font-weight: 600;
  color: #1a202c;
  min-width: 40px;
}

.device-bar,
.browser-bar {
  width: 80px;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  
}

.device-fill,
.browser-fill {
  height: 100%;
  background: #3182ce;
  transition: width 0.3s ease;
}

/* 地理位置分析样式 */
.geo-analysis {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.geo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.geo-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  background: #f7fafc;
}

.geo-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.geo-flag {
  font-size: 24px;
  margin-right: 12px;
}

.geo-info {
  flex: 1;
}

.geo-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
}

.geo-country {
  margin: 0;
  font-size: 12px;
  color: #718096;
}

.geo-percentage {
  font-size: 16px;
  font-weight: 700;
  color: #1a202c;
}

.geo-metrics {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.geo-metric {
  text-align: center;
}

.geo-metric .label {
  display: block;
  font-size: 12px;
  color: #718096;
  margin-bottom: 4px;
}

.geo-metric .value {
  font-size: 14px;
  font-weight: 600;
  color: #1a202c;
}

.geo-progress .progress-bar {
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  
}

.geo-progress .progress-fill {
  height: 100%;
  background: #3182ce;
  transition: width 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .traffic-overview {
    grid-template-columns: 1fr;
  }
  
  .sources-grid {
    grid-template-columns: 1fr;
  }
  
  .device-browser-analysis {
    grid-template-columns: 1fr;
  }
  
  .geo-grid {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}
</style>